<template>
  <div>
    <a-upload
      name="file"
      :action="action"
      :headers="headers"
      :data="datas"
      @change="handleChange"
      :file-list="fileList"
    >
      <a-button :disabled="fileList.length > 0"> <a-icon type="upload" /> Click to Upload </a-button>
    </a-upload>
  </div>
</template>

<script>
export default {
  name: 'upImage',
  props: ['urls'],
  watch: {
    urls: function (val) {
      if (val) {
        var arrs = val.split('/')
        this.fileList = [
          {
            uid: '-1',
            name: arrs[arrs.length - 1],
            status: 'done',
            url: val
          }
        ]
      }
    }
  },
  data() {
    return {
      fileList: [],
      action: process.env.VUE_APP_API_BASE_URL + '/admin/index/uploadFiletoServer',
      loading: false,
      headers: {
        Authorization: this.$store.getters['account/jwt']
      },
      datas: {
        type: 'alipay',
        brand_id: process.env.VUE_APP_BRAND_ID
      }
    }
  },
  created() {},
  methods: {
    handleChange(info) {
      let fileList = [...info.fileList]

      fileList = fileList.slice(-2)

      fileList = fileList.map(file => {
        if (file.response) {
          file.url = file.response.url
        }
        return file
      })

      this.fileList = fileList
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.images {
  width: 96px;
  height: 96px;
}
</style>
